<template>
     <div class="GroupList">
         <router-link class="go-back" :to="'/'"><img src="../assets/search-input-icon-back.png"></router-link>
         <div class="hea">
             <!-- <img src="../assets/GroupList-banr.jpg" alt=""> -->
             <img src="../assets/v_group_banner.jpg" alt="">
         </div>
         <div>
            <transition name="fade">
                <div>
                    <div class="rec">
                        <div class="rec-title">小V拼游&nbsp&nbsp</div>
                        <span class="rec-long"></span>
                        <div class="rec-subtitle">&nbsp&nbsp爆款线路，结伴同游</div>
                    </div>
                </div>
            </transition>
            <div class="group-list" ref="wrapper"  :style="{ height: wrapperHeight + 'px' }" v-infinite-scroll="getList" infinite-scroll-disabled="busy" infinite-scroll-distance="50">
                <div class="group-list-item" v-for="(item,index) in listArr">
                    <router-link :to="{path:'/GroupShow',query:{line_id:item.line_id,product_id:item.product_id}}">

                    <img class="group-list-item-img" :src="item.img"/>
                        <div class="group-list-item-days">
                            <span>{{item.days}}天</span>
                        </div>
                        <div class="group-list-item-city">
                            <img src="../assets/city-head-map.png"/>
                            <span>{{item.city_name}}</span>
                        </div>
                        <div class="group-list-item-title">
                        {{item.title}}
                        </div>
                    <div class="group-list-item-price" v-if="item.groupOrder.length">
                        <div class="group-list-item-price-usd">
                            {{item.person_price_currency}}{{item.person_price}}
                            <span>/人起</span>
                        </div>
                        <div class="group-list-item-price-cny">
                            ￥{{item.person_price_cny}}/人起
                        </div>
                    </div>
                    <div class="group-list-item-sth" v-if="item.groupOrder.length">
                        <div v-for="(dateItem,index) in item.groupOrder" v-if="index < 2">
                            <div class="group-list-item-sth-data">
                                <span>{{dateItem.startDateTitle}}</span>
                                <div class="group-list-item-sth-data-apply ">{{dateItem.title}}</div>
                            </div>
                        </div>
                        <div class="group-list-item-sth-more">
                            <span>查看更多</span>
                        </div>

                    </div>
                    <div class="group-list-item-sth group-list-item-none" v-else>
                        <div class="group-list-item-price">
                            <div class="group-list-item-price-usd">
                                {{item.person_price_currency}}{{item.person_price}}
                                <span>/人起</span>
                            </div>
                            <div class="group-list-item-price-cny">
                                ￥{{item.person_price_cny}}/人起
                            </div>
                        </div>
                        <div class="group-list-item-sth-more">
                            <span>发起拼游</span>
                        </div>
                    </div>

                    </router-link>

                </div>

                <div v-show="busy" class="loadmore-loading">
                    <!--<mt-spinner type="fading-circle"
                                style=" display: inline-block;vertical-align: middle;margin-right: 5px;"></mt-spinner>-->
                    <!--加载中...-->
                </div>
                <div v-show="!busy" class="loadmore-loading">
                    <!--加载中...-->
                </div>
            </div>
         </div>
         <TabBar ref="tabBar" :curr="tabBarCurr"></TabBar>
     </div>
</template>

<script type="text/ecmascript-6">
    import {Toast} from 'mint-ui';
    import config from "../store/config"
    import wxShare from "../store/wxShare"
    import TabBar from "../components/TabBar"
    export default {
        components: {
            TabBar
        },
        data(){
            return {
                offset: 10,
                page: 1,
                wrapperHeight: 0,
                city_id:'',
                tabBarCurr: 0, //底部导航
                listArr:[],
                busy:false,
//                loadEnd: false,
            }
        },
        filters:{
            desstatus(value){
                var status=open
                if(status==open){
                    return '报名中'
                }
            }
        },
        methods:{
            getList() {
                let _that = this;
                let params = {
                    offset: _that.offset,
                    page: _that.page,
                    city_id:_that.city_id,
                }
                _that.busy = true
                _that.axios.postAll('wxsoft/grouptourlist', params,true)
                        .then(res => {
                    if (res) {
                        if (res.data.code == 200 && res.data.data) {
                            let listArr = _that.listArr
                            _that.page += 1
                            _that.totalPage = res.data.data.totalPage
                            _that.listArr = [..._that.listArr, ...res.data.data.list];
                            if (_that.page <= _that.totalPage) {
                                _that.busy = false
                            }

                            if (res.data.data.length < _that.pageSize) {
                                _that.busy = true;
                            }
                        } else {
                            Toast({
                                message: res.data.msg,
                                position: 'top',
                                duration: 1000
                            });
                            _that.busy = true;
                        }
                        /*if (_that.$store.state.token) {//分享

                        }*/
                        _that.share({
                            desc: "拼游出行 爆款路线 结伴同游",
                            link:undefined, // 分享链接
                            imgUrl:'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/2580374d2095fccc63ffc6fe1041df36jpg', // 分享图标
                        });
                    }
                })
            .catch(err => {
                    console.log(err)
                });
            },
            // 分享
            share(obj) {
                wxShare({
                    title: '快帮行|体验美好旅行生活', // 分享标题
                    desc: obj.desc, // 分享描述
                    link: obj.link, // 分享链接
                    imgUrl: 'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/2580374d2095fccc63ffc6fe1041df36jpg', // 分享图标
                    debug: false
                }, () => {//分享成功后的回调函数
                    //Toast({message: '分享成功！', duration: 1500});
                    console.log('分享成功')
                    this.shareView = false;
                    this.share({
                        desc: "拼游出行 爆款路线 结伴同游", // 分享描述
                        link:undefined,
                        imgUrl:'https://kwibon-public-images.oss-cn-beijing.aliyuncs.com/custom/2580374d2095fccc63ffc6fe1041df36jpg',
                    })
                });
            }
        },
        mounted(){
            window.scrollTo(0, 0);
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top - this.$refs.tabBar.$el.offsetHeight;
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .go-back {
        position: absolute;
        top: rpx(30);
        left: rpx(30);
        width: rpx(64);
        height: rpx(64);
        padding-top: rpx(16);
        z-index: 999;
        img {
            width: rpx(32);
            height: rpx(32);
        }
    }
    .rec {
        padding: 0 rpx(20) 0;
            &-title {
                 display: inline-block;
                 font-size: rpx(40);
                 font-weight: bold;
                 padding: rpx(60) 0 rpx(40) rpx(10);
             }
            &-long{
                 position: relative;
                 top:rpx(7);
                 display: inline-block;
                 width: 1px;
                 height: rpx(45);
                 font-size: rpx(40);
                 font-weight: bold;
                 background: #000000;
             }
            &-subtitle{
                 display: inline-block;
                 font-size: rpx(28);
                 color:rgb(51,51,51);
             }
    }

    /*卡片区*/
    .group-list {
        /*padding: rpx(30);*/
        &-item {
            position: relative;
            background: $color0;
            margin: 0 rpx(20) rpx(30);
            border-radius: rpx($radius6);
            -moz-box-shadow:2px 2px 5px #969696;/*firefox*/
            -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
            box-shadow:2px 2px 10px #969696;/*opera或ie9*/
            overflow: hidden;
            &-img {
                width: 100%;
                height: rpx(300);
                border-radius: rpx($radius6) rpx($radius6) 0 0;
                z-index: 1;
            }
            &-days{
            position: absolute;
            left: 0;
            top: 0;
            padding: rpx(10) rpx(15);
            z-index: 2;
            color: #ffffff;
            background: #ff7d00;
            font-size: rpx(25);
            }
            &-city{
                position: absolute;
                right: rpx(20);
                top: rpx(10);
                z-index: 2;
                img{
                    width: rpx(26);
                    height: rpx(26);
                }
                span{
                    display: inline-block;
                    color: $color0;
                    padding: 0 rpx(6);
                    font-size: rpx(25);
                }
            }
        &-title{
            color: #333;
            width: 100%;
            padding: rpx(5) rpx(20);
            line-height: rpx(60);
            font-size: rpx(32);
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        &-price {
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
            padding-left: rpx(20);
            // font-size: rpx(30);
            span{
                font-size: rpx(30);
            }
            &-usd {
                color: #ff7d01;
                font-weight: bold;
                font-size: rpx(40);
            }
            &-cny {
                color: #999;
                margin-left: rpx(25);
                font-size: rpx(28);
            }
        }
        &-sth {
            position: relative;
            min-height: rpx(95);
            display: flex;
            align-items: center;
            padding-left: rpx(10);
                &-data{
                margin: rpx(15) 0;
                padding: 0 rpx(15);
                min-width:rpx(178);
                text-align: center;
                line-height:rpx(35);
                border-right:rpx(1) solid #ccc;
                span{
                    font-size: rpx(26);
                    font-weight: 500;
                    color: #333333;
                };
                &-apply{
                    font-size: rpx(22);
                    color: #ff7d00;
                    font-weight: bold;
                    text-align: center;
                }

                }
                &-newempty{
                    text-align: center;
                    color: #333333;
                    line-height:rpx(65);
                    margin: rpx(15) rpx(20);
                    width:rpx(186);
                    padding:rpx(0) rpx(10);
                    font-weight: bold;
                    border-radius: rpx(10);
                    border:rpx(1) solid #999;;
                }
                &-more{
                    position: absolute;
                    right: rpx(25);
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    line-height: 100%;
                    display: flex;
                    align-items: center;
                    span{
                        background: #ff7d00;
                        color: #fff;
                        font-size: rpx(24);
                        padding: rpx(5) rpx(10);
                        border-radius: rpx(10);
                    }
                }
                &-line{
                    margin: rpx(15) 0;
                    width: rpx(1);
                    background: #ccc;
                    height: rpx(62);
                }
            }

        }

    }

    .loadmore-loading {
        text-align: center;
        height: rpx(120);
        line-height: rpx(120);
        color: $color5;
    }

    .loadmore-loading div {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
    }
</style>